<template>
	<view class="skeleton" :style="{ backgroundColor: bgColor }">
		<!-- 标题骨架 -->
		<view v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth, height: titleHeight }"></view>
		
		<!-- 头像和名称骨架 -->
		<view v-if="showAvatar" class="skeleton-user">
			<view class="skeleton-avatar" :style="{ width: avatarSize, height: avatarSize }"></view>
			<view class="skeleton-username" :style="{ width: usernameWidth }"></view>
		</view>
		
		<!-- 内容骨架 -->
		<view v-if="showContent" class="skeleton-content">
			<view 
				v-for="(item, index) in rows" 
				:key="index" 
				class="skeleton-row" 
				:style="{ 
					width: (index === rows.length - 1 && lastRowWidth) ? lastRowWidth : rowWidth,
					height: rowHeight, 
					marginTop: index !== 0 ? rowMargin : 0
				}"
			></view>
		</view>
		
		<!-- 图片骨架 -->
		<view v-if="showImage" class="skeleton-image" :style="{ width: imageWidth, height: imageHeight }"></view>
		
		<!-- 卡片骨架 -->
		<view v-if="showCards" class="skeleton-cards">
			<view 
				v-for="(item, index) in cardsCount" 
				:key="index" 
				class="skeleton-card" 
				:style="{ width: cardWidth, height: cardHeight, marginRight: index !== cardsCount - 1 ? cardMargin : 0 }"
			></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Skeleton',
		props: {
			// 背景颜色
			bgColor: {
				type: String,
				default: 'transparent'
			},
			// 是否显示标题骨架
			showTitle: {
				type: Boolean,
				default: true
			},
			// 标题宽度
			titleWidth: {
				type: String,
				default: '40%'
			},
			// 标题高度
			titleHeight: {
				type: String,
				default: '36rpx'
			},
			// 是否显示头像骨架
			showAvatar: {
				type: Boolean,
				default: false
			},
			// 头像大小
			avatarSize: {
				type: String,
				default: '80rpx'
			},
			// 用户名宽度
			usernameWidth: {
				type: String,
				default: '30%'
			},
			// 是否显示内容骨架
			showContent: {
				type: Boolean,
				default: true
			},
			// 内容行数
			rows: {
				type: Number,
				default: 3
			},
			// 内容行宽度
			rowWidth: {
				type: String,
				default: '100%'
			},
			// 内容行高度
			rowHeight: {
				type: String,
				default: '24rpx'
			},
			// 内容行间距
			rowMargin: {
				type: String,
				default: '24rpx'
			},
			// 最后一行宽度
			lastRowWidth: {
				type: String,
				default: '60%'
			},
			// 是否显示图片骨架
			showImage: {
				type: Boolean,
				default: false
			},
			// 图片宽度
			imageWidth: {
				type: String,
				default: '100%'
			},
			// 图片高度
			imageHeight: {
				type: String,
				default: '300rpx'
			},
			// 是否显示卡片骨架
			showCards: {
				type: Boolean,
				default: false
			},
			// 卡片数量
			cardsCount: {
				type: Number,
				default: 3
			},
			// 卡片宽度
			cardWidth: {
				type: String,
				default: '220rpx'
			},
			// 卡片高度
			cardHeight: {
				type: String,
				default: '300rpx'
			},
			// 卡片间距
			cardMargin: {
				type: String,
				default: '20rpx'
			},
			// 动画类型：pulse（脉冲）或 gradient（渐变）
			animated: {
				type: String,
				default: 'gradient',
				validator: (value) => {
					return ['pulse', 'gradient', 'none'].indexOf(value) !== -1
				}
			}
		}
	}
</script>

<style>
	.skeleton {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.skeleton-title,
	.skeleton-avatar,
	.skeleton-username,
	.skeleton-row,
	.skeleton-image,
	.skeleton-card {
		background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
		background-size: 400% 100%;
		border-radius: 8rpx;
		position: relative;
		overflow: hidden;
		animation: skeleton-loading 1.4s ease infinite;
	}
	
	.skeleton-title {
		margin-bottom: 32rpx;
	}
	
	.skeleton-user {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}
	
	.skeleton-avatar {
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.skeleton-content {
		margin-bottom: 32rpx;
	}
	
	.skeleton-image {
		margin-bottom: 32rpx;
	}
	
	.skeleton-cards {
		display: flex;
		overflow-x: auto;
		margin-bottom: 20rpx;
	}
	
	.skeleton-card {
		flex-shrink: 0;
	}
	
	@keyframes skeleton-loading {
		0% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0 50%;
		}
	}
</style> 